<title>MS搭配师</title>
<style>
    #dots {
        position: fixed;
        right:50px;
        top: 50%;
        z-index: 1;
        transform: translate(0,-50%);
        transition: opacity 1s;
    }
    #dots a{outline: none;}
    .dot {
        border: 2px #ffffff solid;
        border-radius: 20px;
        width: 18px;
        height: 18px;
        margin: 20px 0;
        list-style: none;
        cursor: pointer;
        transition: height 0.5s;
    }

    .dot.active{
        height: 40px;
        background: #ffffff;
    }

    #videoArea{
        position:relative;min-height: 400px;margin: auto;
    }
    .header-img{
        width: 20px;
        height: 20px;
        vertical-align: -2px;
        margin-right: -5px;
    }
    .dps-title{
        padding-top: 25px!important;
        background: url("${ctx}/resources/images/logo.png") no-repeat center 3px;
        background-size: 30px 30px;
    }
    #myVideo{position: absolute;top:0;left: 0;right:0;bottom:0;margin:auto;z-index: 0;max-width: 100%; max-height: 400px;}
    #footer .copyright{text-transform:none;}
    @media all and (max-width: 768px){
        #dots{right: 10px;}
        #header nav > ul >li.login-link{display: none;}
        #header{background: transparent;}
        #header h1{display: none;}
        .stylist-img,.designer-img,.store-img{height: 35px;}
        .stylist-img{width: 62px;}
        .designer-img{width: 78px;}
        .store-img{width: 48px;}
    }
    @media screen and (max-width: 736px){
        ul.actions li > img{
            width: 150px;
            height: 150px;
        }
    }
</style>
<div id="page-wrapper">
    <!-- 轮播点 -->
    <aside>
        <ul id="dots">
            <li class="dot" onclick="gohere('banner');"></li>
            <li class="dot" onclick="gohere('one');"></li>
            <li class="dot" onclick="gohere('two');"></li>
            <li class="dot" onclick="gohere('four');"></li>
        </ul>
    </aside>
    <!-- Header -->
    <header id="header" class="alt">
        <h1>
            <a href="/">
                <img src="${ctx}/resources/images/logo.png" class="header-img" alt="" >
            Ms搭配师
            </a>
        </h1>
        <nav id="nav">
            <ul>
                <li class="special login-link" ><a href="http://designer.dapeis.cn"><span>登录</span></a></li>
                <li class="special">
                    <a href="#menu" class="menuToggle"><span>菜单</span></a>
                    <div id="menu">
                        <ul>
                            <li><a href="/">首页</a></li>
                            <li><a href="/join?whoJoin=0">搭配师入驻</a></li>
                            <li><a href="/join?whoJoin=1">设计师入驻</a></li>
                            <li><a href="/join?whoJoin=2">商家实体店入驻</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>
    </header>

    <!-- Banner -->
    <section id="banner">
        <div class="inner">
            <h2 class="dps-title">Ms搭配师</h2>
            <br><img src="${ctx}/resources/images/slogan.png" style="max-width: 100%;"/><br />
            <p><span>Open a new shopping mode for you</span></p>
            <ul class="actions">
                <li><a href="javascript:gohere('four')" class="button special">关于Ms搭配师</a></li>
            </ul>
            <ul class="actions">
                <li style="margin: 0 auto;"><img width="150" src="${ctx}/resources/images/QRcode.png"></li>
            </ul>
        </div>
        <a href="#one" class="more scrolly">more</a>
    </section>

    <!-- One -->
    <section id="one" class="wrapper style1 special">
        <div class="inner">
            <header class="major">
                <h2 ><img src="${ctx}/resources/images/1st.png" style="max-width: 100%;"/></h2>
                <p><img src="${ctx}/resources/images/2nd.png" style="max-width: 100%;"></p>
            </header>
            <ul class="icons major">
                <li><span class="label"><img width="50px" src="${ctx}/resources/images/icon1.png"></span></li>
                <li><span class="label"><img width="50px" src="${ctx}/resources/images/icon3.png"></span></li>
                <li><span class="label"><img width="50px" src="${ctx}/resources/images/icon2.png"></span></li>
            </ul>
        </div>
    </section>

    <!-- Two -->
    <section id="two" class="wrapper alt style2" >
        <section class="spotlight">
            <div class="image"><img src="${ctx}/resources/images/pic01.jpg" alt="" /></div><div class="content">
            <h2><img src="${ctx}/resources/images/stylist.png" class="stylist-img" ></h2>
            <p>这是一个新的自由职业，专为爱美的你打造</p>
            <p>不需要你在直播平台上搔首弄姿，我们为你连接1000位忠实的粉丝</p>
            <p>不需要你费尽心思整合供应商，我们为你准备拥有100+原创设计师货源的线上云仓库</p>
            <p>只需要你能为你的粉丝提供明星般的搭配解决方案</p><br />
            <ul class="actions small">
                <li><a href="/join?whoJoin=0" class="button small">搭配师入驻</a></li>
            </ul>
        </div>
        </section>
        <section class="spotlight">
            <div class="image"><img src="${ctx}/resources/images/pic02.jpg" alt="" /></div><div class="content">
            <h2><img src="${ctx}/resources/images/designer.png" class="designer-img"/></h2>
            <p>不管你已经或者正打算注册自己是时尚品牌</p>
            <p>不管你有自己的公司还是个人工作室</p>
            <p>只要你有自己的产品，并能够保障产品的可持续供应</p>
            <p>就可以入驻到我们平台</p>
            <p>我们帮你在移动互联网时代成就自己是品牌梦想</p>
            <ul class="actions small">
                <li><a href="/join?whoJoin=1" class="button small">设计师入驻</a></li>
            </ul>
        </div>
        </section>
        <section class="spotlight">
            <div class="image"><img src="${ctx}/resources/images/pic03.jpg" alt="" /></div><div class="content">
            <h2><img src="${ctx}/resources/images/store.png" class="store-img"/></h2>
            <p>不需要到处找货源，100+原创设计师货源线上云仓库实时供应</p>
            <p>不需要担心库存，0库存0风险</p>
            <p>不需要担心没有客源，线下互联网能力留客+线上客源精准推荐</p>
            <p>不需要担心导购不够专业，明星搭配师培训，全面升级专业水平</p>
            <p>移动互联网时代，省心做老板</p>
            <ul class="actions small">
                <li><a href="/join?whoJoin=2" class="button small">实体店入驻</a></li>
            </ul>

        </div>
        </section>
    </section>
    <!-- CTA -->
    <section id="four"  >
        <section id="cta" class="wrapper style4" >
            <div id="videoArea" class="inner">
                #*<video  style="margin: 0 auto;max-width: 100%; height: 400px;" id="myVideo" src="${ctx}/resources/assets/video/stylist.mp4" controls autoplay>
                    <source src="${ctx}/resources/assets/video/stylist.mp4" type="video/mp4">
                    您的浏览器不支持H5
                </video>*#
            </div>
        </section>

        <!-- Footer -->
        <#include "/layout/footer.ftl">
    </section>

</div>

<!-- Scripts -->
<#include "/layout/script.ftl">
<script type="text/javascript" >
    function gohere(where) {
        $( "html,body").animate({
            scrollTop: $( "#" + where + "").offset().top
        }, 500);
    }
    seajs.use('${ctx}/resources/js/app/index');
</script>
